<template>
	<layout>
		<view class="h-fill">
			<u-navbar title="我的订单" titleColor="#fff" backIconColor="#fff" :background="navBg"></u-navbar>
			<u-sticky>
				<view class="bg-white pad">
					<view class="tab-wrapper h-box" style="width: 100%;">
						<view @click="handleTabClick(0)" class="flex-extend tab-item"
							:class="{'tab-item-active': topTabIdx == 0}">预约订单</view>
						<view @click="handleTabClick(1)" class="flex-extend tab-item"
							:class="{'tab-item-active': topTabIdx == 1}">优享订单</view>
					</view>
				</view>
				<u-tabs :list="tabs" :current="tabIdx" @change="tabChange" :is-scroll="false" active-color="#6563FD"
					bg-color="#F5F5F5"></u-tabs>
			</u-sticky>
			<view class="pad-base">
				<order-list-platform @change="handleChange" :status="tabs[tabIdx].status" :order-type='orderType' ref="orderList">
				</order-list-platform>
			</view>
		</view>
	</layout>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				orderType: 'goods',
				topTabIdx: 1,
				navBg: {
					'background-image': 'linear-gradient(to right, #434AD8, #8E77F5)'
				},
				tabs: [{
					name: '全部',
					list: [],
					status: 0,
					loadingStatus: 'more'
				}, {
					name: '待付款',
					list: [],
					status: 1,
					loadingStatus: 'more'
				}, {
					name: '组队中',
					list: [],
					status: 2,
					loadingStatus: 'more'
				}, {
					name: '待使用',
					list: [],
					status: 3,
					loadingStatus: 'more'
				}, {
					name: '待评价',
					list: [],
					status: 4,
					loadingStatus: 'more'
				}, {
					name: '退款',
					list: [],
					status: 8,
					loadingStatus: 'more'
				}],
				tabIdx: 0,
				busy: false,
			};
		},
		onShow() {
			// this.$refs.orderList.reload();
			if (this.needReload) {
				this.$refs.orderList.reload();
				this.needReload = false
			}
		},
		onReady() {
			this.$refs.orderList.reload();
		},
		async onPullDownRefresh() {
			await this.$refs.orderList.reload();
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			this.$refs.orderList.loadMore();
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		methods: {
			handleChange() {
				this.needReload = true
			},
			handleTabClick(idx) {
				if (idx === 0) {
					this.tabs.splice(2, 0, {
						name: '组队中',
						list: [],
						status: 2,
						loadingStatus: 'more'
					})
					this.orderType = 'subscribe'
				} else {
					this.tabs.splice(2, 1)
					this.orderType = 'goods'
				}
				this.topTabIdx = idx
				this.tabChange(0)
			},
			tabChange(idx) {
				this.tabIdx = idx
				this.$nextTick(() => {
					this.$refs.orderList.reload();
				})
			}
		}
	};
</script>

<style lang="scss">
	.subsection-wrapper {
		height: 40px;
	}

	.navbar {
		display: flex;
		height: 40px;
		padding: 0 5px;
		background: #fff;
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
		position: relative;
		z-index: 10;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			color: $font-color-dark;
			position: relative;

			&.current {
				color: $base-color;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 44px;
					height: 0;
					border-bottom: 2px solid $base-color;
				}
			}
		}
	}

	.uni-swiper-item {
		height: auto;
	}

	.tab-wrapper {
		background: #EFF1F7;
		border-radius: 44rpx;
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 8rpx;
	}

	.tab-item {
		text-align: center;
	}

	.tab-item-active {
		height: 64rpx;
		line-height: 64rpx;
		background: #6667FF;
		box-shadow: 0px 2rpx 10px 0px rgba(0, 0, 0, 0.3);
		border-radius: 36rpx;
		border: 2rpx solid #FFFFFF;
		color: #FFFFFF;
	}
</style>
